<template>
  <page-card title="输出管理"
             sub-title="编辑"
             :need-back="true">
    <a-form :form="form"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 12 }">
      <a-form-item label="ID"
                   v-show="false">
        <a-input v-decorator="['id']" />
      </a-form-item>
      <a-form-item label="输出名称"
                   required>
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['typeOutName',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入输出名称'
                 }]}]" />
      </a-form-item>
      <a-form-item label="应用CODE"
                   required>
        <a-input placeholder="请输入应用CODE" :maxLength="100"
                 v-decorator="['code',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入应用CODE'
                 }]}]" />
      </a-form-item>
      <a-form-item label="输出方式">
        <a-radio-group v-decorator="['typeOut', {rules: [{
          required: false, message: '请选择输出方式'
        }]}]">
          <a-radio value="1">
            HTTP
          </a-radio>
          <a-radio value="2">
            MQ
          </a-radio>
          <a-radio value="3">
            HTTP+MQ
          </a-radio>
          <a-radio value="4">
            定时推送
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='1' || form.getFieldValue('typeOut')=='3'"
                   label="接口"
                   required>
        <a-input placeholder="请输入接口地址" :maxLength="100"
                 v-decorator="['addressOut',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入接口地址'
                 }]}]" />
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='2' || form.getFieldValue('typeOut')=='3'"
                   label="队列名称"
                   required>
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['queueName',{rules: [{ pattern: /^[A-Za-z]+$/, message: '仅限英文字符' },{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入队列名称'
                 }]}]" />
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='2' || form.getFieldValue('typeOut')=='3'"
                   label="交换机"
                   required>
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['exchangName',{rules: [{ pattern: /^[A-Za-z]+$/, message: '仅限英文字符' },{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入交换机'
                 }]}]" />
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='2' || form.getFieldValue('typeOut')=='3'"
                   label="路由KEY"
                   required>
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['routingKey',{rules: [{ pattern: /^[A-Za-z]+$/, message: '仅限英文字符' },{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入路由KEY'
                 }]}]" />
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='2' || form.getFieldValue('typeOut')=='3'"
                   label="最大条数"
                   required>
        <a-input-number v-decorator="['limitMax',{initialValue:100},{rules: [{
                          required: true, message: '请输入最大条数'
                        }]}]"
                        :min="1"
                        :max="1000"
                        placeholder="请输入" />
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='2' || form.getFieldValue('typeOut')=='3'"
                   label="过期时间"
                   required>
        <a-input-number v-decorator="['lastTime',{initialValue:10000},{rules: [{ pattern: /^[0-9]*$/, message: '仅为数字' },{
                          required: true, message: '请输入过期时间（毫秒）'
                        }]}]"
                        :min="1"
                        :max="1000000"
                        placeholder="请输入过期时间（毫秒）" />
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='4'"
                   label="定时规则(分)"
                   required>
        <a-input-number v-decorator="['timingRule',{rules: [{ pattern: /^[0-9]*$/, message: '仅为数字' },{
                          required: true, message: '请输入定时规则(分)'
                        }]}]"
                        :min="1"
                        :max="9999"
                        placeholder="请输入" />
      </a-form-item>
      <a-form-item v-if="form.getFieldValue('typeOut')=='4'"
                   label="推送实现类"
                   required>
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['pushAddress',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入推送实现类'
                 }]}]" />
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea :maxLength="200"
                    placeholder="请输入描述"
                    v-decorator="['txtdesc']"
                    style="resize:none; height:85px"></a-textarea>
      </a-form-item>
      <a-form-item label="是否启用">
        <a-switch checked-children="是"
                  un-checked-children="否"
                  v-decorator="['status', {
                    valuePropName: 'checked',
                    initialValue: true
                  }]" />
      </a-form-item>
      <a-form-item label=" "
                   :colon="false">
        <div style="text-align:center">
          <a-button type="primary"
                    action
                    @click="handleSave">保存</a-button>
          <!-- <a-button @click="handleCancel"
                    style="margin-left:30px;">取消</a-button> -->
        </div>
      </a-form-item>
    </a-form>
  </page-card>
</template>

<script>
import {
  getByIdOutModel,
  saveOrUpdateOutModel
} from '../../../api/exchanger/index'
import { getCodeListByCode } from '../../../api/dictionary/index'
export default {
  name: 'OutputEdit',
  data() {
    return {
      form: this.$form.createForm(this),
      idNum: '', // 页面为编辑时的id
      typeList: []
      // selectSetting6: {
      //   mode: 'default', // multiple default
      //   url: 'system/SysDict/queryList',
      //   param: { code: 'GGLX' }, // code表的workid
      //   optionValue: 'dictKey',
      //   optionKey: 'dictValue',
      //   method: 'post'
      // }
    }
  },
  created() {
    setTimeout(() => {
      this.form.setFieldsValue({ typeOut: '1' })
    }, 0)
    this.idNum = this.$route.query.id
    if (this.idNum != '') {
      this.getInfoByID(this.idNum)
    }
    this.getTypeName()
  },
  methods: {
    // 分类
    getTypeName(key) {
      getCodeListByCode({ code: 'GGLX' }).then((res) => {
        this.typeList = res
      })
    },
    // 保存
    handleSave(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        if (this.form.getFieldValue('typeOut') == '4') {
          values.timingRule = String(values.timingRule)
        }
        saveOrUpdateOutModel(values).then((res) => {
          // this.message.success(this.idNum != '' ? '修改成功！' : '新增成功！')
          this.$router.go(-1)
        })
      })
    },
    // 根据id返回详情
    getInfoByID(id) {
      getByIdOutModel(id).then((res) => {
        this.form.setFieldsValue(res)
        if (this.form.getFieldValue('typeOut') == '4') {
          this.form.setFieldsValue({ timingRule: Number(res.timingRule) })
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(res)
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-select-selection--single {
  height: 32px;
}
.ant-select {
  width: 100%;
}
.ant-input-number {
  width: 100%;
}
</style>